<template>
  <div class="searchResult">
    <!-- 实体 -->
    <div class="search-top">
      <i class="iconfont icon-sousuo1"></i>
      <input class="input" v-model="input" v-on:input="onInputTap"/>
      <i class="iconfont empty icon-ziyuanldpi" @click="empty()"></i>
    </div>
    <!-- 内容 -->
    <div class="content">
      <img v-if="searchNone" class="none-img" src='../../../assets/images/none.png'/>
      <div class="search-item" v-for="item in searchList">
        <div class="search-list" @click='onSearchTap(item.id,item.name,item.status)'>
          <p class="text ellipsis" v-if="item.name">{{item.name}}</p>
          <p class="text ellipsis" v-if="item.title">{{item.title}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant';
  import axios from 'axios'

  export default {
    name: "searchResult",
    data() {
      return {
        input: '',
        searchValue: "",
        placeType: "",
        searchNone: false,
        searchList: []
      }
    },
    methods: {
      empty() {
        this.input = "";
      },
      onInputTap() {
        let value = this.$route.params.type;
        if (value === "live") {
          this._getSearchInfo(this.input, '/api/activelist')
        }
        if (value === "apply") {
          this._getSearchInfo(this.input, '/api/sportslist')
        }
      },
      onSearchTap(id, name, status) {
        this.searchValue = ""
        this.searchList = []
        // 从直播页面点击过来
        if (this.$route.params.type === "live") {
          if (status === 2) {
            Toast('重播页面还在搭建中哦！');
            setTimeout(() => {
              Toast.clear();
              this.$router.push({name: 'detailLive', params: {id:id}})
            }, 3000);
          }
          if (status === 3) {
            console.log('oioi333');
            console.log('oioi333');
            this.$router.push({name: 'detailLive', params: {id:id}})
          }
          if (status === 1) {
            Toast('直播尚未开始，敬请期待');
          }
        }
        // 从发现页面点击过来
        if (this.$route.params.type === "apply") {
          this.$router.push({"name": "findDetail", params: {id: id, title:name}})
        }
      },
      _getSearchInfo(value, url) {
        let that = this
        axios.get(url, {params: {keywords: value}}).then(function (res) {
          if (res.data === null) {
            that.searchNone = true
          }
          else {
            that.searchList = res.data.data
          }
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .searchResult {
    padding: 8px;
    .search-top {
      height: 32px;
      border: 1px solid #eaeaec;
      border-radius: 4px;
      display: flex;
      align-items: center;
      i {
        width: 30px;
        text-align: center;
        line-height: 32px;
      }
      .empty {
        font-size: 8px;
      }
      .input {
        border: none;
        flex: 1;
      }
    }
    .content {
      text-align: center;
      .none-img {
        width: 180px;
        height: 120px;
        margin: 40% auto;
      }
      .search-item {
        text-align: left;
        padding: 0 10px;
        box-sizing: border-box;
        .search-list {
          width: 100%;
          border-bottom: 1px solid #eee;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          .text {
            width: 100%;
            display: block;
          }
          .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
